import { listSelectLoginOrganization } from '@/services/api/api-login';
import { GridContent } from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout';
import { useAccess, useModel } from '@umijs/max';
import { Avatar, Card, Col, Row } from 'antd';
import React, { useEffect, useState } from 'react';
import TreeOrganization from './components/TreeOrganization';
import styles from './index.less';
import TableAccount from './components/TableAccount';
export default (): React.ReactNode => {
    /**
     * 树形列表选择数据
     */
    const [dataTreeSelect, setTreeDataSelectState] = useState<any>({ node: { key: 0 } });
    /**
  
     * 是否 显示 Tab
     */
    const [visibleTab, setVisibleTabState] = useState<boolean>(false);

    const { initialState } = useModel('@@initialState');
    const { currentUser } = initialState || {};
    const access = useAccess();
    const [organizationsList, setOrganizationsListState] = useState<LoginData.LoginListSelectOrganizationVo[]>()
    const loadListSelectLoginOrganizationData = async () => {
        // 登录
        const response = await listSelectLoginOrganization({ accountId: currentUser?.id });
        if (response.code === 0) {
            setOrganizationsListState(response.data);
        }
    };
    useEffect(() => {
        loadListSelectLoginOrganizationData()
    }, [])
    return (
        <div>
            <GridContent >
                <Card bordered={false} style={{ marginBottom: 24 }} >
                    {currentUser && Object.keys(currentUser).length ? (
                        <div style={{ display: 'flex', alignItems: 'center', padding: '0px 100px' }}>
                            <div className={styles.avatarHolder} >
                                <img alt="" src={currentUser.avatar} style={{ borderRadius: 50 }} />
                                <div className={styles.name}>{currentUser.name}</div>
                                <div>{currentUser.organizationName}</div>
                            </div>
                            <div className={styles.detail} style={{ marginLeft: 200 }} >
                                <p>
                                    <i className={styles.title} />
                                    单位名称：{currentUser.organizationTopName}
                                </p>
                                <p>
                                    <i className={styles.group} />
                                    上次登录时间：{currentUser.loginTime}
                                </p>
                                <p>
                                    <i className={styles.address} />
                                    区域：{currentUser?.areaNames.map((item) => item)}
                                </p>
                            </div>
                            {/* <Divider type="vertical"  /> */}
                            <div className={styles.team} style={{ marginLeft: 250 }}>
                                {/* <div className={styles.teamTitle}>单位</div> */}
                                {/* <Row gutter={[22, 24]}> */}
                                {/* <span style={{ marginBottom: 20 }}>单位：</span> */}
                                {organizationsList ? organizationsList.map(item => (
                                    // <Col lg={12} xl={6} >
                                    <div style={{ marginBottom: 20 }}>
                                        <Avatar size="small" src={item.organizationAvatar} />
                                        {item.organizationName}

                                    </div>
                                    // </Col>
                                )) : <></>}
                                {/* </Row> */}
                            </div>
                            {/*  <Divider dashed />
                            <div className={styles.tags}>
                                <div className={styles.tagsTitle}>权限</div>
                                {currentUser.permissions.map(item => (
                                    <Tag >{item}</Tag>
                                ))}

                            </div>
                            <Divider style={{ marginTop: 16 }} dashed /> */}

                        </div>
                    ) : (
                        'loading...'
                    )}
                </Card>
            </GridContent>
            <Row gutter={[16, 16]}>
                <Col span={7}>
                    <TreeOrganization
                        onSelect={(info) => {
                            setVisibleTabState(info.selected);
                            setTreeDataSelectState(info);
                            console.log(info);
                        }}
                        onRefurbish={() => { }}
                    />
                </Col>
                <Col span={17}>
                    {/* <Descriptions>
                        <Descriptions.Item label="报送单位">{currentUser?.organizationName}</Descriptions.Item>
                        <Descriptions.Item label="报送人">{currentUser?.organizationTopName}</Descriptions.Item>
                        <Descriptions.Item label="联系方式">{currentUser?.phone}</Descriptions.Item>
                        <Descriptions.Item label="报送时间">{currentUser?.createdTime}</Descriptions.Item>
                    </Descriptions>
                    <Descriptions>
                        <Descriptions.Item label="行业">
                            <Space size={[0, 8]} wrap>
                              
                            </Space>
                        </Descriptions.Item>
                    </Descriptions>
                    <Descriptions>
                        <Descriptions.Item label="标签">
                          
                        </Descriptions.Item>
                    </Descriptions> */}
                    <TableAccount
                        organizationId={dataTreeSelect?.node?.key}
                        onSaveSuccess={function (): void { }}
                    />

                </Col>
            </Row>
        </div>
    );
};
